<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" class="mt-30" border>
      <el-table-column align="center" label="大区ID" width="60px" prop="id"></el-table-column>
      <el-table-column align="center" label="大区名称" width="100px" prop="name"></el-table-column>
      <el-table-column align="center" label="是否开启跨服">
        <template slot-scope="{row}">
          <el-switch v-model="row.cross_server" active-value="1" inactive-value="0" @change="handleSwitch(row,'cross_server')"></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否独立跨服">
        <template slot-scope="{row}">
          <el-switch v-model="row.cross_alone_server" active-value="1" inactive-value="0" @change="handleSwitch(row,'cross_alone_server')"></el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { deepClone } from '@/utils'
import checkPermission from '@/utils/permission'
import { getServerRegionList, handleCrossServer } from '@/api/ops'

const defaultItem = {
}

export default {
  name: 'CrossServerConfig',
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      listLoading: false,
      dataForm: Object.assign({}, defaultItem),
      list: []
    }
  },
  computed: {
  },
  created() {
    this.getServerRegionList()
  },
  methods: {
    checkPermission,
    async getServerRegionList() {
      this.listLoading = true
      const res = await getServerRegionList()
      this.listLoading = false
      res.data.map(item => {
        item.cross_server = String(item.cross_server)
        item.cross_alone_server = String(item.cross_alone_server)
        return item
      })
      this.list = res.data
    },
    handleSwitch(row, field) {
      const name = field === 'cross_server' ? '跨服' : '单独跨服'
      const oldValue = row[field] == 1 ? '0' : '1'
      const action = oldValue == 0 ? '开启' : '关闭'
      this.$confirm('你确定要' + action + name + '?', name + '开关', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          let data = {
            id: row.id
          }
          data[field] = oldValue == 1 ? 0 : 1
          handleCrossServer(data).then(response => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getList()
          })
        })
        .catch(err => {
          console.error(err)
          row[field] = oldValue
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table {
  font-size: 14px;
}
.el-table td, .el-table th {
  padding: 10px 0;
}
.el-table th>.cell {
  padding-left: 10px;
  padding-right: 10px;
}
</style>
